import React, { FC, useState } from "react";
import { Button, Divider, Space, Tag, Popconfirm, Modal, message } from "antd";
import { useNavigate, Link } from "react-router-dom";
import style from "./index.module.scss";
import {
  CopyOutlined,
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  LineChartOutlined,
  StarOutlined,
} from "@ant-design/icons";
import {
  updateQuestionService,
  duplicateQuestionService,
} from "../../services/question";
import { useRequest } from "ahooks";
type PropsType = {
  _id: number;
  title: string;
  isPublished: boolean;
  isStar: boolean;
  answerCount: number;
  createAt: string;
};

// 问题卡片
const QuestionCard: FC<PropsType> = (props: PropsType) => {
  const nav = useNavigate();
  const { _id, title, createAt, answerCount, isPublished, isStar } = props;

  const [isStarState, setIsStarState] = useState(isStar);

  const { loading: changeStarLoading, run: changeStar } = useRequest(
    async () => {
      await updateQuestionService(_id, { isStar: !isStarState });
    },
    {
      manual: true,
      onSuccess() {
        setIsStarState(!isStarState); //更新状态
        message.success("更新成功");
      },
    }
  );


  const { confirm } = Modal;
  //复制
  // function duplicate() {
  //   message.info("复制成功");
  // }
  const { loading: dulicateLoading, run: duplicate } = useRequest(
    async () => {
      const res = await duplicateQuestionService(_id);
      return res;
    },
    {
      manual: true,
      onSuccess(res) {
        message.success("复制成功");
        console.log(res);
        nav(`/question/edit/${res.id}`);
      },
    }
  );
  //删除
  const [isDeleted, setIsDeleted] = useState(false);
  const { loading: deleteLoading, run: deleteQuestion } = useRequest(
    async () => {
      await updateQuestionService(_id, { isDeleted: true });
    },
    {
      manual: true,
      onSuccess() {
        message.success("删除成功");
        setIsDeleted(true);
      },
    }
  );
  //删除
  function del() {
    confirm({
      title: "是否删除该问卷? ",
      icon: <ExclamationCircleOutlined />,
      onOk() {
        deleteQuestion();
      },
    });
  }

  //如果问卷被删除，则不显示
  if (isDeleted) return null;

  return (
    <div className={style.container}>
      <div className={style.title}>
        <div className={style.left}>
          {/* <a href="#">   {title}</a> */}
          <Link
            to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}
          >
            <Space>
              {isStarState && <StarOutlined style={{ color: "red" }} />}
              {title}
            </Space>
          </Link>
        </div>
        <div className={style.right}>
          <Space>
            {isPublished ? (
              <Tag color="processing">已发布</Tag>
            ) : (
              <Tag>未发布</Tag>
            )}

            <span>答卷：{answerCount}</span>

            <span>{createAt}</span>
          </Space>
        </div>
      </div>
      <Divider style={{ margin: "12px 0 " }} />
      <div className={style["bottom-container"]}>
        <div className={style.left}>
          <Space>
            <Button
              icon={<EditOutlined />}
              type="text"
              size="small"
              onClick={() => nav(`/question/edit/${_id}`)}
            >
              编辑问卷
            </Button>
            <Button
              icon={<LineChartOutlined />}
              type="text"
              size="small"
              onClick={() => nav(`/question/stat/${_id}`)}
              disabled={!isPublished}
            >
              数据统计
            </Button>
          </Space>
        </div>
        <div className={style.right}>
          <Space>
            <Button
              type="text"
              icon={<StarOutlined />}
              size="small"
              onClick={changeStar}
              loading={changeStarLoading}
            >
              {isStarState ? "取消标星" : "标星"}
            </Button>
            <Popconfirm
              title="提示"
              okText="确认"
              cancelText="取消"
              onConfirm={duplicate}
            >
              <Button
                type="text"
                icon={<CopyOutlined />}
                size="small"
                loading={dulicateLoading}
              >
                {" "}
                复制
              </Button>
            </Popconfirm>
            <Button
              type="text"
              icon={<DeleteOutlined />}
              size="small"
              onClick={del}
              loading={deleteLoading}
            >
              删除
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
};

export default QuestionCard;
